<template>
  <div>
     <ul v-for="(item) in arr" :key="item.id" >                    
            <li>{{ item.name }}------- <span @click="fn()">{{ item.age }}</span> -------{{ item.num }}<button @click="delet(item.id)">删除</button></li>       
        </ul> 
        <button @click="add()">添加</button>
        <template to="body">
        <div v-if="is">
           姓名：<input type="text" v-model="d">
           年龄：<input type="text" v-model="e">
           手机号：<input type="text" v-model="f">
        </div>
             
        </template>
       
        
  </div>
</template>
 
<script lang="ts">
import { defineComponent, reactive ,ref} from 'vue';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
 
export default{                  
                     
  setup(){     
        var arr =reactive([{                          
                id:0,           
                name:'张三',                       
                age:18,       
                num:11222333        
            },{             
                id:1,             
                name:'李四',                         
                age:16,         
                num:33344433                  
            },{           
                id:2,          
                name:'王五',                          
                age:17,    
                num:11144335    
            }])          
         function fn(){
             console.log(arr.sort((a,b) =>                    
                 a.age - b.age
             ))
         }   
         function delet(id:number){
            let c = arr.findIndex(item => item.id == id)            
            arr.splice(c,1)
         }  
         var d = ref('')
         var e = ref('')
         var f = ref('')
         let is = ref(false)
         function add(){
            is.value= true
         }
        return {arr,fn,delet,d,e,f,add,is}      
     }     
};
</script>
